<template>
	<view class="container">
		<view class="daochu">
			<view class="daochu-ipt">
				<picker mode="date" :value="kaishiDate" @change="bindKaishiDateChange">
					<view class="uni-input" v-if="kaishiDate">{{ kaishiDate }}</view>
					<view class="uni-input gray-txt" v-else>开始时间</view>
				</picker>
			</view>
			<view class="daochu-ipt">
				<picker mode="date" :value="jieshuDate" @change="bindJieshuDateChange">
					<view class="uni-input" v-if="jieshuDate">{{ jieshuDate }}</view>
					<view class="uni-input gray-txt" v-else>结束时间</view>
				</picker>
			</view>
			<view class="daochu-btn"><button type="default" @click="daochu">导出</button></view>
		</view>

		<scroll-view class="list" v-if="list.length != 0" scroll-y="true" @scrolltolower="loadMore">
			<view class="list_item" @click="toDetail(item.order_sn)" v-for="item in list" :key="item.id">
				<view class="left">
					<view class="img"><image :src="item.avatar ? item.avatar : '/static/img/agent/record.png'" mode="widthFix"></image></view>
					<view class="item_l">
						<text decode><font style="color: blue;">{{ item.nickname }}</font> <font style="margin-left: 20upx;">{{item.start_time}}</font></text>
						<text class="time">订单编号：{{item.order_sn}}</text>
						<text class="time" v-if="item.use_time">用时{{ item.use_time }}</text>
						<text class="time" v-else>正在使用中</text>
					</view>
				</view>

				<view class="item_r">
					<text>+￥{{ item.pay_money }}</text>
					<text v-if="item.is_pay==3" style="color:red">-退{{ item.refund_money }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-else>暂无使用记录</view>
	</view>
</template>

<script>
import { usaRecord } from '../../../api/api.js';
import { config } from '../../../utils/config.js';
export default {
	data() {
		return {
			list: [],
			limit: 30,
			current_page: 1,
			total: 0,
			last_page: 1,
			kaishiDate: '',
			jieshuDate: ''
		};
	},
	onLoad() {
		this.getRecordList('');
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		bindKaishiDateChange(e) {
			this.kaishiDate = e.target.value;
		},
		bindJieshuDateChange(e) {
			this.jieshuDate = e.target.value;
		},
		daochu() {
			let export_id = uni.getStorageSync('user_id');
			let start_time = this.kaishiDate;
			let end_time = this.jieshuDate;
			if(!start_time){
				uni.showToast({
					title:'请输入开始时间',
					icon:'none'
				})
				return
			}
			if(!end_time){
				uni.showToast({
					title:'请输入结束时间',
					icon:'none'
				})
				return
			}
			window.location.href = `${config.base_url}/index/index/excel?start_time=${start_time}&end_time=${end_time}&export_id=${export_id}`;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		toDetail(order_sn) {
			uni.navigateTo({
				url: '/pages/detail/detail?order_sn=' + order_sn
			});
		},
		loadMore() {
			if (this.current_page < this.last_page) {
				this.current_page += 1;
				this.getRecordList('loadMore');
			} else {
			}
		},
		getRecordList(loadMore) {
			usaRecord({
				limit: this.limit,
				page: this.current_page
			}).then(res => {
				console.log(res);
				// this.list = res.data.data
				if (loadMore) {
					if (this.current_page <= this.last_page) {
						for (let i = 0; i < res.data.data.length; i++) {
							this.list.push(res.data.data[i]);
						}
					} else {
					}
				} else {
					this.list = res.data.data;
					this.total = res.data.total;
					this.last_page = res.data.last_page;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
}

.empty {
	width: 100%;
	min-height: 60upx;
	line-height: 60upx;
	text-align: center;
}

.list {
	width: 100%;
	min-height: 60upx;
	// line-height: 60upx;
	text-align: center;
	height: calc(100% - 130upx);
	background-color: #ffffff;
	// margin-top: 10upx;

	.list_item {
		width: calc(100% - 60upx);
		height: 130upx;
		margin: 15upx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1upx solid #f7f7f7;

		.left {
			display: flex;
			align-items: center;

			.img {
				width: 100upx;
				height: 100upx;
				background-color: #d8efff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20upx;

				image {
					width: 100%;
				}
			}

			.item_l {
				height: 80%;
				display: flex;
				font-size: 28upx;
				flex-direction: column;
				justify-content: space-around;
				text-align: left;

				.time {
					color: #999999;
					font-size: 24upx;
				}
			}
		}

		.item_r {
			height: 80%;
			display: flex;
			font-size: 28upx;
			flex-direction: column;
			justify-content: space-around;
			text-align: right;
			color: #45d3c4;
			font-size: 36upx;
		}
	}
}
@media screen and (min-width: 800px) {
	.list {
		height: calc(100vh - 100upx - 130upx) !important;
	}
}
.daochu {
	display: flex;
	padding: 30upx;
	.daochu-ipt {
		margin-right: 20upx;
		flex: 1;
		picker {
			height: 70upx;
			border-radius: 50upx;
			background-color: #ffffff;
			padding: 15upx 30upx;
			font-size: 28upx;
			box-sizing: border-box;
		}
	}
	.daochu-btn {
		width: 200upx;
		overflow: hidden;
		button {
			border-radius: 50upx;
			font-size: 28upx;
			background-color: #3eb9fe;
			color: #ffffff;
		}
	}
}
.gray-txt {
	color: #999999;
}
</style>
